<template>
  <div class=" c" id="my_add_address">
    <header class="mui-bar mui-bar-nav">
      <a class=" mui-icon  mui-pull-left  arr_left" @tap="close_add_address_view">
      </a>
      <h1 class="mui-title">新增地址</h1>

    </header>
    <div class="mui-content" style="padding-top: 0.4rem">
      <div>
        <div class="editor">
          <ul class="editor_ul">
            <li class="editor_li">
              <label>收货人：</label>
              <input type="text" v-model="name" placeholder="请输入收货人姓名"/>
            </li>
            <li class="editor_li">
              <label>手机号：</label>
              <input type="number" v-model="phone" placeholder="请输入手机号" style="width: 9.808rem"/>
            </li>
            <li class="editor_li mui-content-padded">
              <label>市区社区：</label>

              <button @tap="select_city" class="mui-btn mui-btn-block mui-btnsan" type='button'
              >{{province}} {{city}} {{area}}
              </button>

              <div class="editor_li_dw" @tap="get_location">
                <img src="../../assets/images/my_dw.png"/>
              </div>
            </li>
            <li class="editor_li editor_li_b">
              <label>详细地址：</label>
              <input type="text" v-model="detail_address" placeholder="如9栋" value="" id="cityn"/>
            </li>
            <li class="editor_li editor_li_bett mui-table-view-cell">
              <label>设为默认地址：</label>
              <div class="mui-switch mui-switch-blue mui-switch-mini" id="address_switch">
                <div class="mui-switch-handle"></div>
              </div>
            </li>
          </ul>
          <div class="my_butn">
            <button class="subbtn" @tap="submit_new_address">确认</button>
          </div>
        </div>

      </div>


    </div>
  </div>

</template>

<script>

  import pick from '../../tools/mui_picker'

  import h5_plus from '../../tools/h5_plus'
  import address_ajax from '../../ajax/address_ajax'
  export default {
    name: 'add_address',
    data() {
      return {

        detail_address: '',
        name: '',
        phone: '',
        province: '请选择',
        city: '',
        area: '',
        is_default: 0,
        bid: '',
        account_type: ''
      };
    },
    created() {

    },
    methods: {
      close_add_address_view() {
        this.$store.commit("open_address_add", false)
      },
      select_city() {

        pick.city_picker.show(item=> {
          let province = item[0].text;
          let city = item[1].text;
          let area = item[2].text;
          this.province = province;
          this.city = city;
          this.area = area;

        })
      },
      get_location(){
        mui.plusReady(()=>{
          h5_plus.get_location_info(res=>{
            this.province = res.address.province;
            this.city = res.address.city;
            this.area = res.address.district;
            mui.toast("定位成功")
          })

        })

      },
      submit_new_address(){
        address_ajax.add_address({
          uid:this.$store.state.account.user_info.uid,
          name:this.name,
          phone:this.phone,
          province:this.province,
          city:this.city,
          area:this.area,
          default:this.is_default,
          address:this.detail_address,
          bid:this.$store.state.account.community.sqid,
          account_type:this.$store.state.account.user_info.account_type
        },res=>{
          if(res){
            this.$store.commit("address_change_succ");
            this.close_add_address_view();
            mui.toast("地址添加成功")

          }
        })
      }


    },
    mounted() {
      let that = this;
      mui('.mui-switch')['switch']()
      var isActive = document.getElementById("address_switch").addEventListener("toggle", function (event) {
        if (event.detail.isActive) {
          that.is_default = 1;
          mui.toast("设置为默认地址")
        } else {
          that.is_default = 0;
          mui.toast("取消默认");
        }
      })
    },

  }
</script>


<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/my/address.less";
  #my_add_address{
    height: 100%;
  }
</style>
